<template>
  <div>
    <h1>
      玉林师范学院
      <el-input
        size="small"
        style="width: 80px; padding: 0"
        v-model="formInline.Secondarycollege"
      ></el-input>
      <!-- <span style="margin-left: 10px">{{
        formInline.Secondarycollege
      }}</span> -->
      学院<el-input
        size="small"
        style="width: 80px"
        v-model="formInline.className"
      ></el-input
      >班学生<el-input
        size="small"
        style="width: 80px"
        v-model="formInline.schoolYear"
      ></el-input
      >学年度第
      <el-input
        size="small"
        style="width: 80px"
        v-model="formInline.semester"
      ></el-input
      >学期德智体美劳综合测评量化评分表
    </h1>
    <div class="form">
      <el-form
        size="mini"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="姓名：">
          <el-input
            style="width: 100px"
            v-model="formInline.studentName"
          ></el-input>
        </el-form-item>
        <el-form-item label="学号：">
          <el-input
            style="width: 120px"
            v-model="formInline.studentNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="大几：">
          <el-input
            style="width: 80px"
            v-model="formInline.grade"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="info" @click="add">添加一行</el-button>
    <el-table
      height="310"
      :data="tableData"
      fit
      border
      style="width: 100%"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column :label="tableList.number">
        <template slot-scope="scope">
          
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.numberNo
          }}</span>
          <el-input
          style="width: 50px"
            size="small"
            disabled
            v-model="scope.row.numberNo"
            v-else
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.jiafen">
        <template slot-scope="scope">
      
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.jia
          }}</span>
          <el-input
            type="textarea"
            autosize
            v-model="scope.row.jia"
            v-else
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.jianfen">
        <template slot-scope="scope">
        
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.jian
          }}</span>

          <el-input type="textarea" autosize v-model="scope.row.jian" v-else>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.de">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.DE
          }}</span>
          <el-input size="small" v-model="scope.row.DE" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.zhi">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.ZHI
          }}</span>
          <el-input size="small" v-model="scope.row.ZHI" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.ti">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.TI
          }}</span>
          <el-input size="small" v-model="scope.row.TI" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.mei">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.TI
          }}</span>
          <el-input size="small" v-model="scope.row.MEI" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="tableList.lao">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.show">{{
            scope.row.TI
          }}</span>
          <el-input size="small" v-model="scope.row.LAO" v-else></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160px" >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{
            scope.row.show ? "编辑" : "保存"
          }}</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>

      <template #append>
        <el-form
          size="mini"
          :inline="true"
          :model="calculationScore"
          class="demo-form-inline"
        >
          <div style="color: red; font-size: 12px; margin: 10px 0">
            注：(本次自动计算按照（德育基本分+德育分）*0.3
            （智育育基本分+智育育分）*0.4
            （体育基本分+体育分）*0.1 （美育基本分+美育分）*0.1 （劳育基本分+劳育分）*0.1来计算。如果不符合要求，也可以手动计算，例如：（70+12）*0.3或85*0.5形式输入计算，切记括号为英文括号
            )
          </div>
          <div class="scoreForm">
            <el-form-item
              label="德育基本分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.moralEducation.DeBasicScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="德育分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.moralEducation.moralEducationScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="德育总分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.moralEducation.TotalScore"
                @blur="deTotal"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="智育基本分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.IntellectualEducation.ZhiBasicScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="智育分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="
                  scoreList.IntellectualEducation.IntellectualEducationScore
                "
              ></el-input>
            </el-form-item>
            <el-form-item
              label="智育总分:"
              style="display: flex; flex-direction: column; align-items: center"
              
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.IntellectualEducation.TotalScore"
                @blur="zhiTotal"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="体育基本分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.Sports.TiBasicScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="体育分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.Sports.SportsScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="体育总分:"
              style="display: flex; flex-direction: column; align-items: center"
              
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.Sports.TotalScore"
                @blur="tiTotal"
              ></el-input>
            </el-form-item>


             
          </div>
          
          <div style="display: flex">
              <el-form-item
              label="美育基本分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.AestheticEducation.MeiBasicScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="美育分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.AestheticEducation.AestheticEducationScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="美育总分:"
              style="display: flex; flex-direction: column; align-items: center"
              
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.AestheticEducation.TotalScore"
                @blur="meiTotal"
              ></el-input>
            </el-form-item>


             <el-form-item
              label="劳育基本分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList. LaborEducation.LaoBasicScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="劳育分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList. LaborEducation. LaborEducationScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="劳育总分:"
              style="display: flex; flex-direction: column; align-items: center"
              
            >
              <el-input
                style="width: 80px"
                v-model="scoreList. LaborEducation.TotalScore"
                @blur="laoTotal"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="综合测评总分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.ComprehensiveSurveyTotalScore"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="综合测评总分在班中名次:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 50px"
                v-model="scoreList.ComprehensiveSurveyRanking"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="班长签名:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.monitor"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="班主任签名分:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.headmaster"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="辅导员签名:"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-input
                style="width: 80px"
                v-model="scoreList.instructor"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </template>
    </el-table>
    <el-button type="info" @click="calculation">自动计算分数</el-button>
    <el-button type="info" @click="submit">提交表格</el-button>
  </div>
</template>

<script>
import Vue from "vue";
import { TableColumn, Table, Input, Button } from "element-ui";
Vue.use(TableColumn);
Vue.use(Table);
Vue.use(Input);
Vue.use(Button);
export default {
  name: "Senior",
  data() {
    return {
      cellStyle: {
        padding: "5px",
        textAlign:'center'
      },
      headerCellStyle:{
          textAlign:'center'
      },
      // 单元格数据
      tableData: [
        {
          numberNo: 1,
          jia: "",
          jian: "",
          DE: 0,
          ZHI: 0,
          TI: 0,
          MEI:0,
          LAO:0,
          show: false,
        },
      ],
      scoreList: {},
      
      formInline: {
        Secondarycollege: "xxx",
        className: "xxx",
        schoolYear: "xxx",
        semester: "xxx",
        studentName: "",
        studentNo: "",
        grade:''
        // input: "",
      },
      // 表头
      tableList: {
        number: "序号",
        jiafen: "加分原因",
        jianfen: "减分原因",
        de: "德",
        zhi: "智",
        ti: "体",
        mei:"美",
        lao:"劳"
      },
    };
  },
  created() {
    this.scoreList = this.calculationScore;
  },
  computed: {
    calculationScore() {
      return ( {
        // 德育
        moralEducation: {
          DeBasicScore: 70,
          moralEducationScore: this.tableData.reduce((pre, item) => {
            return (pre += Number(item.DE));
          }, 0),
          TotalScore: 0,
        },
        // 智育
        IntellectualEducation: {
          ZhiBasicScore: 0,
          IntellectualEducationScore: this.tableData.reduce((pre, item) => {
            return (pre += Number(item.ZHI));
          }, 0),
          TotalScore: 0,
        },
        // 体育
        Sports: {
          TiBasicScore: 70,
          SportsScore: this.tableData.reduce((pre, item) => {
            return (pre += Number(item.TI));
          }, 0),
          TotalScore: 0,
        },
        //美育
        AestheticEducation:{
            MeiBasicScore:70,
            AestheticEducationScore: this.tableData.reduce((pre, item) => {
            return (pre += Number(item.MEI));
          }, 0),
          TotalScore: 0,
        },
        //劳育
        LaborEducation:{
            LaoBasicScore:70,
            LaborEducationScore: this.tableData.reduce((pre, item) => {
            return (pre += Number(item.LAO));
          }, 0),
          TotalScore: 0,
        },
        // 综测总分
        ComprehensiveSurveyTotalScore: 0,
        // 综测排名
        ComprehensiveSurveyRanking: "无",
        // 班长签名
        monitor: "",
        // 班主任签名
        headmaster: "",
        // 辅导员签名
        instructor: "",
      });
    },
  },
  methods: {
    deTotal(e) {
      this.scoreList.moralEducation.TotalScore = Number(
        eval(e.target.value)
      ).toFixed(2);
    },
    zhiTotal(e) {
      this.scoreList.IntellectualEducation.TotalScore = Number(
        eval(e.target.value)
      ).toFixed(2);
    },
    tiTotal(e) {
      this.scoreList.Sports.TotalScore = Number(
        eval(e.target.value)
      ).toFixed(2);
    },
     meiTotal(e) {
      this.scoreList.AestheticEducation.TotalScore = Number(
        eval(e.target.value)
      ).toFixed(2);
    },
     laoTotal(e) {
      this.scoreList.LaborEducation.TotalScore = Number(
        eval(e.target.value)
      ).toFixed(2);
    },
    handleEdit(index) {
      // console.log(index, row);
      this.tableData[index].show = !this.tableData[index].show;
    },
    handleDelete(index) {
      // console.log(index, row);
      const indexNumber = [index];
      this.tableData = this.tableData.filter((item, idx) => {
        return !indexNumber.includes(idx);
      });
    },
    add() {
      this.tableData.push({
        numberNo: this.tableData.length + 1,
        jia: "",
        jian: "",
        DE: 0,
        ZHI: 0,
        TI: 0,
        MEI:0,
        LAO:0,
        show: false,
      });
    },
    submit() {
      console.log("input", this.tableData, this.scoreList, this.formInline);
      
    },
    calculation() {
      this.scoreList.moralEducation.TotalScore = (
        (Number(this.scoreList.moralEducation.moralEducationScore) +
          Number(this.scoreList.moralEducation.DeBasicScore)) *
        0.3
      ).toFixed(2);
      this.scoreList.IntellectualEducation.TotalScore = (
        (Number(
          this.scoreList.IntellectualEducation.IntellectualEducationScore
        ) +
          Number(this.scoreList.IntellectualEducation.ZhiBasicScore)) *
        0.4
      ).toFixed(2);
      this.scoreList.Sports.TotalScore = (
        (Number(this.scoreList.Sports.SportsScore) +
          Number(this.scoreList.Sports.TiBasicScore)) *
        0.1
      ).toFixed(2);
      this.scoreList.AestheticEducation.TotalScore = (
        (Number(this.scoreList.AestheticEducation.AestheticEducationScore) +
          Number(this.scoreList.AestheticEducation.MeiBasicScore)) *
        0.1
      ).toFixed(2);
      this.scoreList.LaborEducation.TotalScore = (
        (Number(this.scoreList.LaborEducation.LaborEducationScore) +
          Number(this.scoreList.LaborEducation.LaoBasicScore)) *
        0.1
      ).toFixed(2);
      this.scoreList.ComprehensiveSurveyTotalScore = (
        Number(this.scoreList.moralEducation.TotalScore) +
        Number(this.scoreList.IntellectualEducation.TotalScore) +
        Number(this.scoreList.Sports.TotalScore)+
        Number(this.scoreList.AestheticEducation.TotalScore)+
        Number(this.scoreList.LaborEducation.TotalScore)
      ).toFixed(2);
    },
  },
};
</script>
<style lang="scss" scoped>
h1 {
  text-align: center;
  font-size: 24px;
}
.form {
  text-align: center;
}
.scoreForm {
  display: flex;
}
</style>